
<script setup>  
import { ref } from "@vue/reactivity";
import { createMovieNote, uploadImage } from "../../Api";
import { error, success } from "../../utils/log";
import { IMG_ADDRESS } from "../../utils/request";
    const name = ref("");
    const brief = ref("");
    let file = null;
    const uploadImg = async () => {
        let [fileHandle] = await window.showOpenFilePicker();
        file = await fileHandle.getFile();
    }
    const submit = async () => {

        if(!name.value || !file) {
            error("文件名为空或者没有上传图片");
            return ;
        }
        let formData = new FormData();
        const type = file.name.split(".").pop();
        formData.append("path",`movie/${name.value}`)
        formData.append("fileName",`${name.value}-bg.${type}`);
        formData.append("file",file);
        let p1 = uploadImage(formData);
        let data = {};
        data.Name = name.value;
        data.Brief = brief.value;
        data.Time = new Date().getTime();
        data.Views = 0;
        data.Url = `${IMG_ADDRESS}movie/${name.value}/${name.value}-bg.${type}`;
        let p2 = createMovieNote(data);
        try {
            await Promise.all([p1,p2]);
        }catch(e) {
            console.log(e);
            error("创建失败!");
            return ;
        }
        success("创建成功~");
        name.value = "";
        brief.value = "";
        file = null;
    }
</script>
 
<template>
    <div class="container">
        <h1>创建影评</h1>
        <div>
            <label for="input-name">电影名:</label>
            <input id="input-name" type="text" v-model="name">
        </div>
        <div>
            <label for="input-brief">简介:</label>
            <textarea id="input-brief" cols="30" rows="10" v-model="brief"></textarea>
        </div>
        <div>
            <button @click="uploadImg">上传封面图</button>
        </div>
        <div>
            <button @click="submit">创建影评</button>
        </div>
    </div>
</template>

<style lang='less' scoped>
    .container {
        width: 300px;
        margin: 0 auto;
    }
</style>